<template>
    <div class="homePage">
        <el-container class="homePage" style="margin-top:10px;background: #f3f3f4;">
            <el-aside class="ul-list">
                <ul class="category-list">
                    <li v-for="(item, index) in data.list" :key="index"
                        :class="data.selectIndex == index ? 'dropdown treeselected' : 'dropdown'"
                        @click="selectItem(item, index)">
                        <div class="pull-left">
                            <img class="left-img" :src="item.url" />
                            <span> {{ item.name }}</span>
                        </div>
                    </li>
                </ul>
            </el-aside>
            <el-main class="main-list">
                <div class="mail-box-header">
                    <div class="headers">
                        <span class="return">{{ $t('webAuto.ReturnSuperior') }} {{ '>' }}</span>
                        <span style="padding-right:5px" @click="showMenu">{{ $t('webAuto.AccessibleDirectory') }}</span>
                        <span v-if="data.title != ''">{{ '/ ' + data.title }}</span>
                    </div>
                    <div class="file-list">
                        <el-upload v-model="data.filedPath" class="upload-demo" :action="data.action"
                            :headers="data.headers" :on-preview="handlePreview" :on-remove="handleRemove"
                            :before-remove="beforeRemove" :on-exceed="handleExceed">
                            <el-button class="add-button" type="danger" plain @click="handleCilck"><el-icon
                                    style="margin-right:5px">
                                    <UploadFilled />
                                </el-icon>传文件
                            </el-button>
                        </el-upload>
                        <el-button plain style="padding:0 8px" @click="deletes" v-if="data.showDelete">{{ $t('webAuto.delete') }}</el-button>
                    </div>
                </div>
                <!-- 文件显示 -->
                <div class="flie-show">
                    <div class="upload-list__items" v-for="(item, index) in data.fileList" :key="index">
                        <el-checkbox v-model="item.checked" size="large" @change="checkedItem(item)" />
                        <img class="views" src="./img/view.png" />
                        <p class="file-names" @click="readList(item)">{{ item.name }}</p>
                        <p class="publisher2">{{
                            (item.size / 1024).toFixed(2) > 1000 ? (item.size / 1024 / 1024).toFixed(2) + 'MB' :
                                (item.size / 1024).toFixed(2) + 'KB'
                        }}</p>
                        <p class="publisher">{{ item.personname }}</p>
                        <p class="release-time">{{ item.createTime }}</p>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>

import { onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import uuid from "@/utils/uuid.js";
import homePageApi from "@/api/homePage.js";
import homeApi from "@/api/home.js";
const { t } = useI18n();

const route = useRoute();
const router = useRouter();

const data = reactive({
    selectIndex: 0,
    title: '',
    list: [{
        name: '企业空间',
        url: "src/views/home/img/nube.png"
    }
    // , {
    //     name: '私人空间',
    //     url: "src/views/home/img/carpetas.png"
    // }
    ],
    action: `http://${process.env.NODE_ENV === 'dev' ? '10.1.22.31:9991/wflow/oss/oss-simple?bizId=' : 'api.eletile.com:18081/wflow-api/wflow/oss/oss-simple?bizId='}`,
    // action: 'http://10.1.22.31:9991/wflow/oss/oss-simple?bizId=',
    headers: {
        wflowtoken: localStorage.getItem("wflow-token")
    },//文件上传
    filedPath: [],//上传用的文件列表
    fileList: [],//获取已经存在的文件
    showDelete: false
})

onMounted(() => {
    // data.action = data.action + uuid() + '&bizType=wflow-file'
    flieShowList()
})
// 点击菜单
const selectItem = (item, index) => {
    data.selectIndex = index;
    data.title = item.name;
}

// 可访问目录点击
const showMenu = () => {
    data.title = ''
}

const handleCilck = () => {
    data.action = data.action + uuid() + '&bizType=wflow-file'
}

// 点击文件列表中已上传的文件时的钩子
const handlePreview = (uploadFile) => {
    // console.log(uploadFile.response.data.url)
    window.open(uploadFile.response.data.url, '_blank')
}
// 文件列表移除文件时的钩子
const handleRemove = (file, uploadFiles) => {
    homeApi.deleteFile([file.response.data.uuid]).then(res => {
        console.log(res.data)
        if (res.data.statusCode == 200) {
            ElMessage.success({ message: res.data.message })

        }
    })
}
//删除文件之前的钩子，参数为上传的文件和文件列表，
//  若返回 false 或者返回 Promise 且被 reject，则停止删除。
const beforeRemove = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => {
            flieShowList()
            return true
        },
        () => false
    )
}
//	当超出限制时，执行的钩子函数
const handleExceed = (files, uploadFiles) => {
    if (files.length > 100) {
        ElMessage.warning({ message: this.$t('webAuto.attachmentsUploaded') })
    }
}

// 获取上传的文件信息
const flieShowList = () => {
    homeApi.getFileList2('', 'wflow-file').then(res => {
        res.data.records.forEach(element => {
            element.checked = false
        });
        data.fileList = res.data.records
    })
}

// 阅读
const readList = (item) => {
    let previewUrl = 'http://180.101.147.124:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(
        `${item.url}?name=${'文件预览'}`))
    window.open(previewUrl)
}
const base64Encode = (str) => {
    // console.log(str)
    // 将字符串转换为 Uint8Array
    const bytes = new TextEncoder().encode(str);
    // 使用 btoa() 方法进行 Base64 编码
    return btoa(String.fromCharCode.apply(null, bytes));
}

// 选择
const checkedItem = (item) => {
    let arr = data.fileList.filter(item => item.checked == true)
    if (arr.length > 1) {
        data.showDelete = false
    } else {
        data.showDelete = true
    }
}
// 删除
const deletes = () => {
    let arr = data.fileList.filter(item => item.checked == true)
    if (arr.length > 1) {
        data.showDelete = false
    } else {
        data.showDelete = true
        homeApi.deleteFile([arr[0].uuid]).then(res => {
            console.log(res.data)
            if (res.data.statusCode == 200) {
                ElMessage.success({ message: res.data.message })
                flieShowList()
                data.showDelete = false
            }
        })
    }

}
</script>

<style scoped lang="less">
@import "index.less";

* {
    margin: 0;
    padding: 0;
}

.ul-list {
    padding: 15px 0 0 5px;
    line-height: 35px;
    width: 200px;

    .category-list {
        margin-bottom: 0;
        list-style: none;
        width: 100%;

        .dropdown {
            display: flex;
            justify-content: space-between;
            padding-left: 5px;
            white-space: nowrap;
            width: 100%;

            .pull-left {
                color: #666666;
                float: left !important;

                .left-img {
                    width: 15px;
                    height: 13px;
                    padding-top: 2px;
                    padding-right: 5px;
                }
            }

            .pull-left:hover {
                cursor: pointer;
                color: #D64445 !important;
            }
        }

        .treeselected {
            background-color: white;
        }
    }
}

.main-list {
    margin: 0 !important;
    background-color: white;
    display: flex;
    flex-direction: column;

    .mail-box-header {
        padding: 15px;
        height: 120px;
        border: none;
        box-sizing: border-box;
        overflow: hidden;

        .headers {
            height: 22px;
            width: 100%;

            .return {
                display: inline-block;
                width: 80px;
                font-weight: bold;
                color: gray;
                cursor: default;
            }

            .return2 {
                color: #D64445 !important;
            }
        }
    }
}

.file-list {
    height: 30px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;

    .add-button {
        width: 80px !important;
        height: 30px !important;
        background-color: #fff;
        color: #D64445;
        margin-right: 10px;
    }

    .add-button:hover {
        color: #fff;
        background-color: #D64445;
    }
}

.flie-show {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    .upload-list__items {
        height: 45px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        flex-direction: row;
        line-height: 45px;
        border-top: 1px solid #e7eaec;
        font-size: 13px;
        color: #666666;

        .views {
            padding: 15px 6px 15px 8px;
            height: 13px;
            width: 13px;
        }

        .file-names {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 10px;
        }

        .publisher {
            width: 70px;
            line-height: 45px;
            padding: 0 15px;
        }

        .publisher2 {
            width: auto;
            line-height: 45px;
            padding: 0 0 0 15px;
            text-align: left;
        }

        .release-time {
            line-height: 45px;
            width: auto;
        }
    }
}

.upload-list__items :hover {
    cursor: pointer;
}
</style>
